import React, { Component } from 'react';
import IceContainer from '@icedesign/container';
import { Checkbox, Loading, Button, Icon, Dialog, Feedback, Affix, Grid } from '@icedesign/base';
import { Link } from 'react-router-dom';
import axios from 'axios';
import IceTitle from '@icedesign/title';
import IceLabel from '@icedesign/label';
import IcePanel from '@icedesign/panel';
import cookie from 'react-cookies';
import '../../BlogRead.scss'
const ButtonGroup = Button.Group;
const { Row, Col } = Grid
export default class TermsInfo extends Component {
  static displayName = 'TermsInfo';

  constructor(props) {
    super(props);
    const { total } = this.props
    this.state = {
      dataSource: null,
      current: parseInt(this.props.id),
      visible: false
    };
  }

  componentWillMount() {

    this.getData()

  }

  back = (current) => {
    const { total } = this.props
    if (current < parseInt(this.props.total)) {
      this.setState({
        current: current + 1
      })
      this.props.history.push(`/blog/read/${parseInt(current) + 1}/${total}`)
      this.getData(current + 1)
    }
    else
      Feedback.toast.error("已经是第一篇啦~~~")
  }
  next = (current) => {
    const { total } = this.props
    if (parseInt(this.state.current) - 1 > 0) {

      this.setState({
        current: current - 1
      })
      this.props.history.push(`/blog/read/${parseInt(current) - 1}/${total}`)
      this.getData(current - 1)
    } else
      Feedback.toast.error('已经是最后一篇啦~~~')

  }
  getData = (pid) => {
    let id = this.props.id;
    if (pid != null)
      id = pid;
    axios.get(` http://zzuisa.cn/reader/blog/get/${id}`).then((res) => {

      if (res.data.code === 0) {
        this.setState({
          dataSource: res.data.data
        })
      }
    })
  }
  render() {
    const blog = this.state.dataSource
    const footer = (
      <dir>
        <Link to='/login'>
          <Button type='primary'>
            去登录！
          </Button>

        </Link>
        <Link to='/login'>
          <Button type='primary'>
            还是去登录！
          </Button>
        </Link>
      </dir>
    );
    return (

      < IceContainer >

        {blog != null ?
          <div>
            <Affix offsetTop={30}>
              <Button type="secondary" onClick={() => { this.props.history.push('/blog') }}> 返回</Button>
              <br /><br />
              {blog.author === cookie.load('username') ?
                <Button type="secondary" onClick={() => { this.props.history.goBack() }}> 修改</Button>
                : ""
              }
            </Affix>

            <div className="strong" style={{ fontSize: '18px', margin: '0 85px 0 85px' }}>
              <div>
                <IcePanel status="primary" style={{ width: '100%', marginBottom: '50px' }}>
                  <IcePanel.Header>
                    {blog.bname}
                  </IcePanel.Header>
                  <IcePanel.Body>
                    <p style={{ fontSize: '15px', margin: 0, lineHeight: 1.5, color: '#333' }}>
                      <IceTitle
                        text={blog.btitle}
                        decoration={true}
                      />
                    </p>
                    <div style={styles.infoItem}>
                      <IceLabel style={{ backgroundColor: '#e4e2fa', color: '#7265e6' }}>{blog.author}</IceLabel>
                      <IceLabel style={{ backgroundColor: '#fde3cf', color: '#f56a00' }}>{blog.createtime}</IceLabel>
                    </div>
                    <div dangerouslySetInnerHTML={{ __html: `${blog.bcontent}` }} />
                  </IcePanel.Body>
                </IcePanel>
              </div>
            </div>
          </div>
          :
          (this.state.visible == false ? setTimeout(() => {
            this.setState({
              visible: true
            })
          }, 1000) : null,
            < Dialog
              visible={this.state.visible}
              footer={footer}
              title="警告"
            >
              <h3 style={{ color: 'red' }}><b>您的登录凭证已过期</b></h3>
              <ul>
                <li>您可以选择:</li>
              </ul>
            </Dialog>)

        }
        {
          this.props.total === undefined ? ''
            : <div>
              <Affix offsetBottom={45}>
                <Button size="large" style={{ float: 'left' }} type="primary" align='left' onClick={() => this.back(this.state.current)}>
                  <Icon type="arrow-left" />
                </Button>
              </Affix>
              <Affix offsetBottom={45}>
                <Button size="large" style={{ float: 'right' }} type="primary" align='right' onClick={() => this.next(this.state.current)}>
                  <Icon type="arrow-right" />
                </Button>
              </Affix>
            </div>
        }

      </IceContainer >
    );
  }
}

const styles = {
  desc: {
    fontSize: '13px',
    lineHeight: '28px',
  },
  title: {
    textAlign: 'center',
    margin: 0,
    paddingBottom: '20px',
    fontSize: '20px',
    borderBottom: '1px solid #dedede',
  },
  content: {
    color: '#666',
    fontSize: '18px',
    padding: '20px 0',
    borderBottom: '1px solid #dedede',
  },
  btn: {
    textAlign: 'center',
  },
};
